/**
  * @description: 订单详情中的支付信息
  * @author: yingying.fan
  * @date: 2019/3/8 15:04
  */
import React, { Component } from 'react'
import { StyleSheet, View, Text } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils'
import { appSubThemeColor } from '../../configs/appconfig'

type Props = {
  orderInfo: Object
}

export default class PayInfo extends Component<Props> {

  constructor (props) {
    super(props)
    this.state = {}
  }

  _getInfoLine (key, value) {
    return (
      <View style={styles.payInfoLine}>
        <Text style={styles.payInfoKey}>{key}：</Text>
        <Text style={styles.payInfoValue}>{value}</Text>
      </View>
    )
  }

  render () {
    return (
      <View style={styles.wrapper}>
        {this._getInfoLine('支付方式', this.props.orderInfo.PAYMENT_NAME)}
        {this._getInfoLine('商品合计', '￥' + this.props.orderInfo.SKUS_FEE)}
        {this._getInfoLine('运费', '￥' + this.props.orderInfo.POSTAL_FEE)}
        {this._getInfoLine('优惠券', '-￥' + this.props.orderInfo.COUPON_FEE)}
        <View style={styles.totalPriceLine}>
          <Text style={styles.totalPriceKey}>合计：</Text>
          <Text style={styles.totalPriceValue}>￥{this.props.orderInfo.PAY_FEE}</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    paddingHorizontal: px2dp(30),
    backgroundColor: '#ffffff',
    paddingTop: px2dp(20)
  },
  payInfoLine: {
    flexDirection: 'row',
    height: px2dp(48)
  },
  payInfoKey: {
    width: px2dp(154),
    color: '#999999',
    fontSize: px2dp(24)
  },
  payInfoValue: {
    color: '#333333',
    fontSize: px2dp(28)
  },
  totalPriceLine: {
    flexDirection: 'row',
    height: px2dp(88),
    alignItems: 'center',
    marginTop: px2dp(20),
    borderStyle: 'solid',
    borderColor: '#dddddd',
    borderTopWidth: px2dp(1)
  },
  totalPriceKey: {
    width: px2dp(154),
    color: appSubThemeColor,
    fontSize: px2dp(28)
  },
  totalPriceValue: {
    color: appSubThemeColor,
    fontSize: px2dp(28)
  }
})